<template>
	<uni-nav-bar dark :fixed="true" shadow bgimage="linear-gradient(to right, #4facfe 0%, #00f2fe 100%)" status-bar
		left-icon="left" left-text="返回" title="商家二维码" @clickLeft="back" />
	<view class="uni-nav-bar-empty-v"></view>
	<view style="display: flex;justify-content:center;align-items:center;flex-wrap: wrap;">
		<view
			style="display: flex;justify-content:center;align-items:center;flex-wrap: wrap;margin-top: 150rpx; width: 100%;height: 100rpx; font-size: 36rpx;color: #333333;font-weight: 500;">
			{{merchantName}}
		</view>
		<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>
	</view>
</template>

<script>
	// 引入生成二维码的库
	// 假设你使用的是 weapp-qrcode
	import drawQrcode from '../../common/weapp.qrcode.esm.js'
	import {
		MERCHANT_PAGE_URL
	} from '@/common/common.js';

	export default {
		data() {
			return {
				merchantId: null,
				merchantName: '牛肝菌专卖店',
				qrCodeUrl: ''
			};
		},
		onLoad(options) {
			this.merchantId = options.merchantId;
			this.merchantName = options.merchantName;
			this.qrCodeUrl = MERCHANT_PAGE_URL + "?merchantId=" + options.merchantId;
			this.generateQRCode(MERCHANT_PAGE_URL + "?merchantId=" + options.merchantId)
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			generateQRCode(url) {
				drawQrcode({
					width: 200,
					height: 200,
					canvasId: 'myQrcode',
					// ctx: wx.createCanvasContext('myQrcode'),
					text: url,
					// v1.0.0+版本支持在二维码上绘制图片
					image: {
						imageResource: '../../images/icon.png',
						dx: 70,
						dy: 70,
						dWidth: 60,
						dHeight: 60
					}
				})
			}
		}
	};
</script>